<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-11-21 17:13:52
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-08-30 11:03:54
 * @Description:
 *
-->

<template>
  <!-- 用户审核页 -->
  <div class="permission-authority-container">
    <Row style="padding-bottom: 20px">
      <Col span="2">
        <span
          style="
            font-size: 18px;
            text-align: left;
            font-weight: bolder;
            line-height: 30px;
          "
        >角色选择</span>
      </Col>
      <Col span="2">
        <el-select
          v-model="role"
          size="small"
          style="width: 200px; position: relative; right: 15%"
          placeholder="选择角色"
          @change="changeRole"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </Col>
    </Row>

    <Row style="padding-bottom: 20px; border-top: 1px solid #f2f2f2">
      <Col span="20" :offset="2" />
    </Row>

    <Row style="padding-bottom: 20px">
      <Col span="2">
        <span
          style="font-size: 20px; text-align: left; font-weight: bolder"
        >页面权限&nbsp;&nbsp;&nbsp;</span><i class="el-icon-question"></i>
      </Col>
      <Col span="6" style="positon: relative; top: 8px">
        <div
          style="width:13px;height:13px;background:rgba(38, 175, 210, 1);display: inline-block;border-radius: 3px;}"
        ></div>
        表示该权限受限，不能创建、删除，只能使用和浏览
      </Col>
      <Col span="6" style="positon: relative; top: 8px">
        <div
          style="width:13px;height:13px;background:rgba(247, 181, 0, 1);display: inline-block;border-radius: 3px;}"
        ></div>
        表示该权限受限，不能创建、删除和编辑，只能浏览
      </Col>
    </Row>
    <Row style="padding-bottom: 20px">
      <Col span="22" style="padding-bottom: 20px">
        <Card style="width: 100%">
          <p slot="title">用户权限</p>
          <Col span="24">
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in userPageList"
                  :key="item.key"
                  style="width: 110px"
                  disabled
                  :label="item.key"
                  :value="item.key"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
          </Col>
        </Card>
      </Col>
      <Col span="22">
        <Card style="width: 100%">
          <p slot="title" style="background: rgba(250, 250, 250, 1)">
            系统权限
          </p>
          <Col span="24">
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in resourceManageList"
                  :key="item.key"
                  :disabled="true"
                  :class="['result', resultClass(item.permissions)]"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                算网纳管
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in CNManageList"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                算力资源管理
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in computManageList"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px; margin-bottom: 10px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                业务编排
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in orchestrateList"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                集群管理
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in clusterMgmt"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row
              style="
                  padding-top: 20px;
                "
            >
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in appService"
                  :key="item.key"
                  :disabled="true"
                  :class="['result', resultClass(item.permissions)]"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                智能调度
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in intelligentScheduling"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                系统监控
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in systemMonitor"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                运维分析
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in operationAnalysis"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
            <Row>
              <div
                style="
                  padding-bottom: 10px;
                  padding-top: 15px;
                  font-weight: 600;
                "
              >
                系统管理
              </div>
            </Row>
            <Row>
              <CheckboxGroup v-model="userPageAuthority">
                <Checkbox
                  v-for="item in systemManageList"
                  :key="item.key"
                  :disabled="roleType"
                  :class="['result', resultClass(item.permissions)]"
                  style="width: 110px"
                  :label="item.key"
                  :value="item.key"
                  @click.native.prevent="setPermission(item.key)"
                  @mouseenter.native="showSpace(item)"
                  @mouseleave.native="hideLoading"
                ><span>{{ item.label }}</span></Checkbox>
              </CheckboxGroup>
            </Row>
          </Col>
        </Card>
      </Col>
    </Row>

    <Row style="padding-bottom: 20px">
      <Col span="4" :offset="20">
        <el-button
          size="medium"
          type="primary"
          @click="SubmitManagement()"
        >提交</el-button>
      </Col>
    </Row>
    <el-dialog
      :visible.sync="detailDialog"
      class="namespace-add-dialog"
      title="资源权限"
      width="300px"
      top="15vh"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div style="margin-left: 20px">
        <CheckboxGroup v-model="permissionDetail">
          <Checkbox
            v-for="item in permissionDetailList"
            :key="item.key"
            style="width: 100px; margin-bottom: 20px"
            :label="item.key"
            :value="item.key"
          ><span>{{ item.label }}</span></Checkbox>
        </CheckboxGroup>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDetail">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="detailConfirmClick"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllRole,
  updateRoleAuth,
  roleDetail,
  getUserInfo
} from '@/api/user'
export default {
  components: {},
  data() {
    return {
      userPageAuthorityCheck: false,
      userId: '',
      delayLoading: null,
      detailDialog: false,
      permissionDetail: '',
      permissionDetailList: [
        {
          key: 'create',
          label: '创建资源'
        },
        {
          key: 'delete',
          label: '删除资源',
          permissions: []
        },
        {
          key: 'use',
          label: '使用资源',
          permissions: []
        },
        {
          key: 'browse',
          label: '浏览资源',
          permissions: []
        }
      ],
      pagePermissions: {
        CNList: ['create', 'delete', 'browse', 'use'],
        CNToken: ['create', 'delete', 'browse', 'use'],
        NetMgmt: ['create', 'delete', 'browse', 'use'],
        SubNetMgmt: ['create', 'delete', 'browse', 'use'],
        SecurityGroupMgmt: ['create', 'delete', 'browse', 'use'],
        VMMgmt: ['create', 'delete', 'browse', 'use'],
        CloudStorageMgmt: ['create', 'delete', 'browse', 'use'],
        ElasticIP: ['create', 'delete', 'browse', 'use'],
        FloatIP: ['create', 'delete', 'browse', 'use'],
        RouteMgmt: ['create', 'delete', 'browse', 'use'],
        NetTopo: ['create', 'delete', 'browse', 'use'],
        FlowControl: ['create', 'delete', 'browse', 'use'],
        RegionMgmt: ['create', 'delete', 'browse', 'use'],
        ResourceMgmt: ['create', 'delete', 'browse', 'use'],
        ImageMgmt: ['create', 'delete', 'browse', 'use'],
        HostBackup: ['create', 'delete', 'browse', 'use'],
        HostMigration: ['create', 'delete', 'browse', 'use'],
        SystemMgmtMenu: ['create', 'delete', 'browse', 'use'],
        SystemMgmtQuota: ['create', 'delete', 'browse', 'use'],
        SystemMgmtVerify: ['create', 'delete', 'browse', 'use'],
        SystemMgmtRoles: ['create', 'delete', 'browse', 'use'],
        SystemMgmtAuthority: ['create', 'delete', 'browse', 'use'],
        SystemMgmtUsers: ['create', 'delete', 'browse', 'use']
      },
      detailKey: '',
      role: '', // 角色
      roleType: false, // 角色类型
      roleOptions: [], // 角色列表
      userPageAuthority: [], // 页面所有权限
      userPageAuthorityList: [
        // 用户权限页面
        {
          key: 'SystemMgmtVerify',
          label: '用户审核',
          type: 'userPageList',
          permissions: ['create', 'delete', 'browse', 'use']
        },
        {
          key: 'SystemMgmtRoles',
          label: '角色管理',
          type: 'userPageList',
          permissions: []
        },
        {
          key: 'SystemMgmtAuthority',
          label: '权限管理',
          type: 'userPageList',
          permissions: []
        },
        {
          key: 'SystemMgmtUsers',
          label: '用户管理',
          type: 'userPageList',
          permissions: []
        },
        {
          // 系统概览权限
          key: 'Overview',
          label: '资源概览',
          type: 'resourceManageList',
          permissions: []
        },
        {
          key: 'CNList',
          label: '算网列表',
          type: 'CNManageList',
          permissions: []
        },
        {
          key: 'CNToken',
          label: '算网凭据',
          type: 'CNManageList',
          permissions: []
        },
        {
          key: 'NetMgmt',
          label: '网络管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'SubNetMgmt',
          label: '子网管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'SecurityGroupMgmt',
          label: '安全组管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'VMMgmt',
          label: '虚拟机管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'CloudStorageMgmt',
          label: '云存储管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'ElasticIP',
          label: '弹性IP',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'FloatIP',
          label: '浮动IP',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'RouteMgmt',
          label: '路由管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'NetTopo',
          label: '网络拓扑',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'FlowControl',
          label: '流量控制',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'RegionMgmt',
          label: '区域管理',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'ResourceMgmt',
          label: '资源规格',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'ImageMgmt',
          label: '镜像',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'HostBackup',
          label: '主机备份',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'HostMigration',
          label: '主机迁移',
          type: 'computManageList',
          permissions: []
        },
        {
          key: 'SystemMgmtMenu',
          label: '菜单配置',
          type: 'systemManageList',
          permissions: []
        },
        {
          key: 'SystemMonitorCNRes',
          label: '算力资源监控',
          type: 'systemMonitor',
          permissions: []
        },
        {
          key: 'SystemMonitorCluster',
          label: '集群资源监控',
          type: 'systemMonitor',
          permissions: []
        },
        {
          key: 'SystemMgmtQuota',
          label: '资源配额',
          type: 'systemManageList',
          permissions: []
        },
        {
          key: 'OrchestrateTraditional',
          label: '传统编排',
          type: 'orchestrate',
          permissions: []
        },
        {
          key: 'OrchestrateVisualized',
          label: '可视化编排',
          type: 'orchestrate',
          permissions: []
        },
        {
          key: 'ClusterMgmtIndex',
          label: '集群纳管',
          type: 'clusterMgmt',
          permissions: []
        },
        {
          key: 'ClusterMgmtDetail',
          label: '集群控制台',
          type: 'clusterMgmt',
          permissions: []
        },
        {
          key: 'AppService',
          label: '应用服务',
          type: 'appService',
          permissions: []
        },
        {
          key: 'DistributedDeployment',
          label: '分布式部署',
          type: 'intelligentScheduling',
          permissions: []
        },
        {
          key: 'PolicyDeployment',
          label: '策略部署管理',
          type: 'intelligentScheduling',
          permissions: []
        },
        {
          key: 'K8SEventOverview',
          label: '事件总览',
          type: 'operationAnalysis',
          permissions: []
        },
        {
          key: 'AlarmOverview',
          label: '告警总览',
          type: 'operationAnalysis',
          permissions: []
        },
        {
          key: 'AuditLogs',
          label: '审计日志',
          type: 'operationAnalysis',
          permissions: []
        }
      ]
    }
  },
  computed: {
    userPageList: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'userPageList'
      })
    },
    resourceManageList: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'resourceManageList'
      })
    },
    CNManageList: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'CNManageList'
      })
    },
    computManageList: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'computManageList'
      })
    },
    systemMonitor: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'systemMonitor'
      })
    },
    systemManageList: function() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'systemManageList'
      })
    },
    orchestrateList() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'orchestrate'
      })
    },
    clusterMgmt() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'clusterMgmt'
      })
    },
    appService() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'appService'
      })
    },
    intelligentScheduling() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'intelligentScheduling'
      })
    },
    operationAnalysis() {
      return this.userPageAuthorityList.filter(function(item) {
        return item.type === 'operationAnalysis'
      })
    }
  },
  mounted() {
    this.getRoleList() // 角色
    this.getUser()
  },
  methods: {
    getUser() {
      getUserInfo().then((res) => {
        if (res.code === 200) {
          this.userId = res.data.user.id // 加载用户
        }
      })
    },
    getData() {
      this.userPageAuthority = Object.keys(this.pagePermissions)
      for (const key in this.pagePermissions) {
        for (const item in this.userPageAuthorityList) {
          if (this.userPageAuthorityList[item].key === key) {
            this.userPageAuthorityList[item].permissions =
              this.pagePermissions[key]
          }
        }
      }
      // console.log(this.userPageAuthorityList[9])
      this.userPageAuthorityCheck = true
    },
    showSpace(item) {
      this.delayLoading = setTimeout(() => {
        // 这里是调用二维码接口
        this.showDetail(item)
      }, 2000)
    },
    hideLoading() {
      clearTimeout(this.delayLoading)
      this.delayLoading = null
    },
    showDetail(item) {
      if (this.roleType === true) {
        return
      }
      console.log(this.userPageAuthorityList)
      this.detailKey = ''
      this.detailKey = item.key
      this.permissionDetail = item.permissions
      this.detailDialog = true
    },
    closeDetail() {
      this.detailDialog = false
      this.permissionDetail = []
      this.detailKey = []
    },
    setPermission(value) {
      if (this.roleType === true) {
        return
      }
      if (this.userPageAuthority.includes(value)) {
        this.userPageAuthority.splice(this.userPageAuthority.indexOf(value), 1)
        for (const item in this.userPageAuthorityList) {
          if (this.userPageAuthorityList[item].key === value) {
            this.userPageAuthorityList[item].permissions = []
          }
        }
      } else {
        this.userPageAuthority.push(value)
        for (const item in this.userPageAuthorityList) {
          if (this.userPageAuthorityList[item].key === value) {
            this.userPageAuthorityList[item].permissions = [
              'create',
              'delete',
              'browse',
              'use'
            ]
          }
        }
      }
    },
    detailConfirmClick() {
      for (const item in this.userPageAuthorityList) {
        if (this.userPageAuthorityList[item].key === this.detailKey) {
          this.userPageAuthorityList[item].permissions = this.permissionDetail
        }
      }
      if (this.permissionDetail.length !== 0) {
        if (this.userPageAuthority.includes(this.detailKey) === false) {
          this.userPageAuthority.push(this.detailKey)
        }
      }
      if (this.permissionDetail.length === 0) {
        this.userPageAuthority.splice(
          this.userPageAuthority.indexOf(this.detailKey),
          1
        )
      }
      this.closeDetail()
    },
    resultClass(val) {
      let resultClass = 'common'
      if (
        val.length === 2 &&
        val.includes('browse') === true &&
        val.includes('use') === true
      ) {
        resultClass = 'normallimited'
      }
      if (val.length === 1 && val.includes('browse') === true) {
        resultClass = 'severelylimited'
      }
      if (val.length === 0) {
        resultClass = 'common'
      }
      return resultClass
      /* if(val.length<4){
        resultClass = 'normallimited'
        return resultClass
      }
      if(val.length===1&&val.includes("browse")==true){
        resultClass = 'severelylimited'
        return resultClass
      }
      if(val.length==0){
        return resultClass
      } */
    },
    /**
     * @description: 角色
     * @description: 获取角色列表
     * @return {*}
     */
    getRoleList() {
      getAllRole().then((res) => {
        // res.code === 200正常
        if (res.code === 200) {
          this.roleOptions = res.data
        }
      })
    },
    /**
     * @description: 改变角色
     * @description: 触发页面事件
     * @return {*}
     */
    changeRole(val) {
      if (val === '1' || val === '2' || val === '3') {
        this.roleType = true
      } else {
        this.roleType = false
      }
      const data = {
        roleIndex: val
      }
      /**
       * @description: 获取角色详情
       * @description: 所有页面权限
       * @return {*}
       */
      roleDetail(data).then((res) => {
        // res.code === 200正常
        if (res.code === 200) {
          // const users = res.data[0].users
          this.pagePermissions = {}
          this.pagePermissions = res.data
          this.getData()
        }
      })
    },
    /**
     * @description: 提交权限
     * @description: 点击提交触发
     * @return {*}
     */
    SubmitManagement() {
      if (this.role === '') {
        this.$Message.error('请选择角色') // 参数校验
        return
      }
      if (this.role === 1 || this.role === 2 || this.role === 3) {
        this.$Message.error('该角色不可修改') // 参数校验
        return
      }
      const pagePermissions = {}
      for (let i = 0; i < this.userPageAuthority.length; i++) {
        for (const item in this.userPageAuthorityList) {
          if (
            this.userPageAuthorityList[item].key === this.userPageAuthority[i]
          ) {
            pagePermissions[this.userPageAuthority[i]] =
              this.userPageAuthorityList[item].permissions
          }
        }
      }
      const params = {
        roleIndex: this.role,
        pagePermissions: JSON.stringify(pagePermissions)
      }
      updateRoleAuth(params).then((res) => {
        // res.code === 200正常
        if (res.code === 200) {
          this.$Message.success('权限设置成功')
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$Message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.permission-authority-container {
  height: auto;
  background: #ffffff;
  padding: 40px;
  .ivu-card-head {
    background: #fafafa !important;
  }
  .ivu-card-head {
    padding: 7px 16px !important;
    background: #fafafa !important;
  }
}
</style>
<style lang="less">
.permission-authority-container {
  height: auto;
  background: #ffffff;
  padding: 40px;
  .result {
    color: rgba(105, 105, 105, 1) !important;
    &.common {
      color: rgba(105, 105, 105, 1) !important;
    }

    &.severelylimited {
      color: rgba(247, 181, 0, 1) !important;
    }

    &.normallimited {
      color: rgba(38, 175, 210, 1) !important;
    }
  }
  .ivu-card-head {
    background: #fafafa !important;
  }
  .ivu-card-head {
    padding: 7px 16px !important;
    background: rgba(250, 250, 250, 1) !important;
  }
  .ivu-checkbox-inner {
    border: 2px solid #dcdee2 !important;
    padding: 2px !important;
    border-radius: 50% !important;
  }
  .ivu-checkbox-checked .ivu-checkbox-inner:after {
    transform: rotate(45deg) scale(0) !important;
  }
  .el-dialog__footer {
    padding: 10px 25px !important;
  }
  .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner {
    background-color: #2d8cf0 !important;
    border-color: #2d8cf0 !important;
  }
}
</style>
